<template>
	<view class="strategy content">
		<view class="nav flex_r_between" id="scroll">
			<uni-icons type="back" :size="22" color="#000000" @click="goback"></uni-icons>
			<view class="input flex_r_between">
				<view class="location" @click="toChooseCity">
					<uni-icons type="location" :size="20" color="#484848"></uni-icons>
					<text>{{city}}</text>
				</view>
				<input type="text" v-model="keyWord" confirm-type="search" @confirm="onSearch">
				<view class="btn" @click="onSearch">搜索</view>
			</view>
		</view>

		<view class="detail" v-if="show">
			<view class="title" v-if="name">{{name}}</view>
			<view style="padding-bottom: 120rpx;" v-show="list.length == 0">
				<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="暂无景区信息" :width="161" :height="129"></blankPage>
			</view>
			<view class="list" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
				<view class="left">
					<u-image width="270rpx" height="180rpx" :src="item.mainImage" mode="aspectFill" lazy-load></u-image>
				</view>
				
				<view class="right">
					<view class="name hidden">{{item.scenicName}}</view>
					<view class="star">
						<uni-rate disabled :size="16" disabledColor="#EF5233" :value="item.commentScore" />
						<text>{{Number(item.commentScore).toFixed(1)}}</text>
					</view>
					<view class="address flex_r_between">
						<text>{{item.cityName}} 距您{{Number(item.distance).toFixed(1)}}km</text>
					</view>
					<view class="price_jingqu">¥{{item.startPrice}}</view>
					<view class="tag">
						<text v-for="(val,i) in item.themeGroups" :key="i">{{val}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="loading">
			<u-loading mode="circle" :show="!show" :size="50"></u-loading>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex' //引入mapState
	export default {
		computed: {
			...mapState({
				'userLocation': 'userLocation'
			}),
		},
		data() {
			return {
				list: [],

				keyWord: '',
				themeGroup: '',
				city: '',

				total: 0,
				page: 1,
				height: 0,

				Imgindex: 0,
				name: '',
				
				
				show:false,
			}
		},
		watch:{
			userLocation:function(newvalue,oldvalue){
				if(newvalue.latitude != oldvalue.latitude || newvalue.longitude != oldvalue.longitude){
					this.city = this.$store.state.userLocation.city
					this.list = []
					this.page = 1
					this.total = 0
					this.getList()
				}
			}
		},
		onLoad(option) {
			// this.$nextTick(() => {
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query.select('#scroll').boundingClientRect(data => {
			// 		this.height = data.height
			// 	}).exec();
			// })
			this.name = option.name
			this.themeGroup = option.themeGroup
			this.keyWord = option.keyWord ? option.keyWord : ''
			this.city = this.$store.state.userLocation.city
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.getList()
			}
		},
		methods: {
			goback() {
				uni.navigateBack()
			},
			getList() {
				let that = this
				this.request.httpTokenRequest({
					url: "ticket/index",
					method: "get"
				}, {
					cityName: this.city,
					keyWord: this.keyWord,
					provinceName: '',
					country: '',
					longitude: this.$store.state.userLocation.longitude,
					themeGroup: this.themeGroup,
					latitude: this.$store.state.userLocation.latitude,
					star: '',
					distanceRange: 50,
					sort: 1,
					isExistAvailableSaleProduct: 1,
					page: this.page,
					pageSize:10
				}).then(res => {
					if (res.code == 0) {
						// this.keyWord = ''
						this.total = res.data.count
						if(this.total == 0){
							this.show = true
						}
						res.data.scenicList.forEach(item => {
							// #ifdef APP
							uni.getImageInfo({
								src: item.mainImage,
								success: function(image) {
									uni.compressImage({
										src: image.path,
										quality: 10,
										success: path => {
											item.mainImage = path.tempFilePath
											that.list.push(item)
											that.show = true
										},
										fail: err => {
											// console.log(err);
										}
									})
								}
							});
							// #endif
							// #ifndef APP
							that.list.push(item)
							that.show = true
							// #endif
							
						})
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			onSearch() {
				this.list = []
				this.page = 1
				this.total = 0
				this.getList()
			},
			otherFn() {
				this.city = this.$store.state.userLocation.city
				this.list = []
				this.page = 1
				this.total = 0
				this.getList()
			},
			toChooseCity() {
				uni.navigateTo({
					url:'/otherpages/chooseAddress/loactionList'
				})
			},
			toDetail(e) {
				uni.navigateTo({
					url: '/otherpages/travelStrategy/scenicSpotDetails?id=' + e.scenicId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loading {
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translateX(-50%);
	}
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		display: flex;
		padding: calc(var(--status-bar-height) + 10rpx) 30rpx 10rpx;
		width: calc(100vw - 60rpx);
		background: #F5F7F8;
		box-sizing: content-box;

		.input {
			flex: 1;
			background: rgba(255, 255, 255, 0.7);
			border-radius: 36rpx;
			padding: 18rpx 0 16rpx;
			height: 70rpx;
			border: 1rpx solid #EF5233;
			backdrop-filter: blur(10px);
			padding: 0 7rpx;
			box-sizing: border-box;
			margin-left: 35rpx;

			.location {
				display: flex;
				align-items: center;
				padding: 0 18rpx;
				border-right: 1rpx solid #C4C3C3;

				text {
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					margin-left: 5rpx;
				}
			}

			input {
				padding: 0 20rpx;
				flex: 1;
			}

			.btn {
				width: 103rpx;
				height: 50rpx;
				background: #EF5233;
				border-radius: 32rpx;
				backdrop-filter: blur(10px);
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 50rpx;
				text-align: center;
			}
		}
	}

	.strategy {
		padding-top: calc(var(--status-bar-height) + 80rpx);
	}

	.price_jingqu {
		font-weight: 600;
		font-size: 26rpx;
		color: #EF5233;
		line-height: 37rpx;
		text-align: right;
		margin-top: 6rpx;
	}

	.detail {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(211, 211, 211, 0.12);
		border-radius: 28rpx;
		border: 1rpx solid #FFFFFF;
		margin-top: 23rpx;
		padding: 20rpx 30rpx;

		.title {
			font-size: 34rpx;
			font-weight: 600;
			color: #357650;
			line-height: 48rpx;
		}

		.list {
			display: flex;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #EFEFEF;

			.left {
				width: 270rpx;
				height: 180rpx;
				margin-right: 30rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				flex: 1;
				max-width: 50%;

				.name {
					font-size: 32rpx;
					font-weight: 600;
					color: #0F0807;
					line-height: 45rpx;
				}

				.star {
					display: flex;
					align-items: center;
					margin: 10rpx 0;

					text {
						font-size: 24rpx;
						font-weight: 600;
						color: #EF5233;
						line-height: 32rpx;
						margin-left: 5rpx;
					}
				}

				.address {
					margin-bottom: 10rpx;

					text {
						font-size: 24rpx;
						color: #888889;
						line-height: 33rpx;
					}

					view {
						font-size: 26rpx;
						font-weight: 600;
						color: #EF5233;
						line-height: 37rpx;
					}
				}

				.tag {
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					text {
						border-radius: 6rpx;
						border: 1rpx solid #ECECEC;
						padding: 2rpx 7rpx;
						font-size: 20rpx;
						color: #6985C2;
						margin-left: 11rpx;
					}
				}
			}
		}
	}
</style>